import React from "react";
import Uploader from "../../components/uploader";

export default class Edit extends React.Component {
    constructor(...props) {
        super(...props);
        this.state = {
            nickname: '',
            avatar: '',
            realname: '',
            phone: '',
            loading: false,
            tips: null
        };
    }

    componentDidMount() {
        this.ajax && this.ajax.abort();
        this.ajax = $.get('/admin/user/view', {
            id: this.props.params.openid
        }, (data)=> {
            this.setState({
                nickname: data.nickname,
                avatar: data.avatar,
                realname: data.realname,
                phone: data.phone
            });
        });
    }

    componentWillUnMount() {
        this.ajax && this.ajax.abort();
    }

    onChange(e) {
        this.setState({
            [e.target.id]: e.target.value
        })
    }

    onAvatarUploaded(url) {
        this.setState({avatar: url + '?imageView2/1/w/100'});
    }

    onSubmit(e) {
        e.preventDefault();
        this.setState({loading: true, tips: '加载中'});
        this.ajax && this.ajax.abort();
        this.ajax = $.post('/admin/user/post?id=' + this.props.params.openid, {
            nickname: this.state.nickname,
            avatar: this.state.avatar,
            realname: this.state.realname,
            phone: this.state.phone
        })
            .success(data=> {
                this.setState({loading: false, tips: '编辑成功'});
            }, 'json')
            .error(e=> {
                console.log(e.responseJSON.errmsg);
                this.setState({loading: false, tips: e.responseJSON.errmsg});
            }, 'json');
    }

    render() {
        return (
            <div className="site-user user-edit">
                <h2>编辑用户</h2>
                <form action="" className="form-horizontal" onSubmit={e=>this.onSubmit(e)}>
                    <div className="form-group">
                        <label htmlFor="nickname" className="control-label col-md-2">昵称</label>
                        <div className="col-md-4">
                            <input type="text" className="form-control" value={this.state.nickname}
                                   onChange={(e)=>this.onChange(e)} id="nickname"/>
                        </div>
                    </div>
                    <div className="form-group">
                        <label htmlFor="avatar" className="control-label col-md-2">头像</label>
                        <div className="col-md-4">
                            <Uploader fileType="image/*" onUploaded={url=>this.onAvatarUploaded(url)}/>
                            <div className="help-block">
                                <img src={this.state.avatar} className="img-responsive" alt=""/>
                            </div>
                        </div>
                    </div>
                    <div className="form-group">
                        <label htmlFor="realname" className="control-label col-md-2">姓名</label>
                        <div className="col-md-4">
                            <input type="text" className="form-control" value={this.state.realname}
                                   onChange={(e)=>this.onChange(e)} id="realname"/>
                        </div>
                    </div>
                    <div className="form-group">
                        <label htmlFor="phone" className="control-label col-md-2">电话</label>
                        <div className="col-md-4">
                            <input type="text" className="form-control" value={this.state.phone}
                                   onChange={(e)=>this.onChange(e)} id="phone"/>
                        </div>
                    </div>
                    <div className="form-group">
                        <div className="col-md-2 col-md-offset-2">
                            <button className="btn btn-primary btn-block" disabled={this.state.loading}>提交</button>
                            <p className="text-success">{this.state.tips}</p>
                        </div>

                    </div>
                </form>
            </div>
        )
    }
}

Edit.contextTypes = {
    router: React.PropTypes.object.isRequired
};